<!-- Copyright 2019 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="chrome://resources/chromeos/colors/cros_styles.css">
<meta charset="utf-8">
<title>Sample System Web App</title>
<header id='title'>Sample System Web App</header>
<style>
  html {
    background-color: var(--cros-bg-color);
    color: var(--cros-text-color-primary);
    font-family: Roboto;
  }

</style>
</head>
<br>
<a href="/inter_frame_communication.html"><button>Inter Frame Communication Demo</button></a>
<a href="/component_playground.html"><button>Component Playground</button></a>
<div>
  <div>
    <label for="number1">Multiply number 1: </label>
    <input type="text" id="number1" value="0">
  </div>
  <div>
    <label for="number2">Multiply number 2: </label>
    <input type="text" id="number2" value="0">
  </div>
  <div>
    <label for="additional">Additional multiplier: </label>
    <input type="text" id="additional" value="2">
  </div>
</div>

<p id="result">Result: 0</p>

<div>
  <button id="do-something" type="button">Do Something (via Mojo)</button>
  <div>
    <label for="mojo-event">Mojo event: </label>
    <input type="text" readonly id="mojo-event">
  </div>
  <div>
    <label for="background">Preferences background: </label>
    <input type="text" readonly id="background">
  </div>
  <div>
    <label for="foreground">Preferences foreground: </label>
    <input type="text" readonly id="foreground">
  </div>
</div>

<script src="main.js" type="module"></script>
